<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <title>流程画图测试</title>
    <%@include file="/common/baselink.jsp"%>

    <script type="text/javascript">
    	mxBasePath = "http://localhost:8080/bkfm-web-admin/assets/wf/src";
    </script>
    <!-- 引入支持库文件 -->
	<script type="text/javascript" src="http://localhost:8080/bkfm-web-admin/assets/wf/src/js/mxClient.js"></script>
</head>
<body style="background-image:url('http://localhost:8080/bkfm-web-admin/assets/wf/examples/editors/images/grid.gif')">
<!-- <div id="graphContainer" style="position:relative;overflow:visible;width:100%;height:100%;">

</div> -->
<script type="text/javascript">
Ext.onReady(function(){
	Ext.create('Ext.container.Viewport', {
	    layout: 'border',
	    frame:false,
	    border:false,
	    items: [{
	    	id: 'leftPanel',
	    	region: 'west',
	    	layout: 'fit',
	    	width: 220
	    },{
	    	id: 'mainPanel',
	        region: 'center',
	        layout: 'fit',
	        autoScroll: true,
	        html: '<div id="graphContainer" style="width:100%;height:100%;background-image:url(\'http://localhost:8080/bkfm-web-admin/assets/wf/examples/editors/images/grid.gif\')"></div>'
	    }],
	    listeners:{
	    	render: function(){
				var container = document.getElementById("graphContainer");
				alert(container)
				showFlow(container);
			}
		}
	});
/* 	var flowWin = 	Ext.create('Ext.com.bkfm.window', {
		title : "流程图设计器",
		autoScroll : true,
		modal : true,
		height : Utils.getHeight()*0.8,
		width : Utils.getWidth()*0.7,
		html: '<div id="graphContainer" style="width:120%;height:120%;background-image:url(\'http://localhost:8080/bkfm-web-admin/assets/wf/examples/editors/images/grid.gif\')"></div>',
		tbar:[{
			iconCls: 'save',
			tooltip: '开始',
			enableToggle:true
		},{
			iconCls: 'add',
			tooltip: '会签',
			enableToggle:true,
			handler: function(self){
				alert(self.pressed)
				debugger;
				
			}
		},{
			text: '查看xml文档',
			handler: function(){
				var enc = new mxCodec();
				alert(enc.encode(graph.getModel()).outerHTML);
			}
		}],
		listeners:{
			show: function(){
				var container = document.getElementById("graphContainer");
				showFlow(container);
			}
		}
	}).show(); */
	
	//var container = document.getElementById("graphContainer");
	//showFlow(container);
});
/* Ext.onReady(function(){
	var container = document.getElementById("graphContainer");
	showFlow(container);
}); */

var graph;
function showFlow(container){
	//设置显示连接线的图标
	mxConnectionHandler.prototype.connectImage = new mxImage('${ctxPath}/assets/wf/examples/images/green-dot.gif', 14, 14);
	//检查浏览器是否支持
	if (!mxClient.isBrowserSupported()) {
		//如果浏览器不支持，显示错误信息。
		mxUtils.error('Browser is not supported!', 200, false);
	} else {
		// 禁用浏览器自带右键菜单  
        mxEvent.disableContextMenu(document.body);
		//能够实现在SVG中清晰呈现矩形，即：去锯齿效果
		mxRectangleShape.prototype.crisp = true;
		//在给定的容器中创建的图形
		graph = new mxGraph(container);
		//设置对象显示连接线
		graph.setPanning(true);
		graph.setTooltips(true);
		graph.setConnectable(true);
		
		//设置连接线的连接方式为拐点方式
		var style = graph.getStylesheet().getDefaultEdgeStyle();
		//折角的地方为圆弧
		style[mxConstants.STYLE_ROUNDED] = true;
		style[mxConstants.STYLE_EDGE] = mxEdgeStyle.ElbowConnector;
		graph.alternateEdgeStyle = 'elbow=vertical';
		
		//右击菜单
		graph.popupMenuHandler.factoryMethod = function(menu, cell, evt)
		{
			//graph.clearSelection();
			return createPopupMenu(graph, menu, cell, evt);
		};
		//设置容器自动调整大小
		//graph.setResizeContainer(true);
		
		// 创建下拉菜单  
		new mxRubberband(graph);
		
		//获取布局
		var layout = new mxHierarchicalLayout(graph);
		
		// 在对象中创建默认组件
		var parent = graph.getDefaultParent();
		//在图形中插入组件
		//开启模型的事务
		graph.getModel().beginUpdate();
		try {
			//插入点
			var v1 = graph.insertVertex(parent, null, '开始,', 20, 20, 80, 30);
			//v1.cellType = "star";
			var v2 = graph.insertVertex(parent, null, '部门领导审核', 200, 150, 80, 30,'ROUNDED;strokeColor=red;fillColor=green');
			
			var v3 = graph.insertVertex(parent, null, '结束', 300, 250, 80, 30);
			//插入线
			var e1 = graph.insertEdge(parent, null, '', v1, v2);
			
			var e1 = graph.insertEdge(parent, null, '提交', v2, v3);
			//保证可以手动给线条添加折点
			//layout.execute(parent);
		}finally {
			//事务结束
			graph.getModel().endUpdate();
		}
	}
}
/**
 * @param graph
 * @param menu
 * @param cell	当前选择的节点对象
 */
function createPopupMenu(graph, menu, cell, evt)
{
	
	/* if (cell != null)
	{
		menu.addItem('Cell Item', 'editors/images/image.gif', function()
		{
			mxUtils.alert(cell);
		});
	}
	else
	{
		menu.addItem('No-Cell Item', 'editors/images/image.gif', function()
		{
			mxUtils.alert('MenuItem2');
		});
	}
	menu.addSeparator();
	menu.addItem('MenuItem3', '../src/images/warning.gif', function()
	{
		mxUtils.alert('MenuItem3: '+graph.getSelectionCount()+' selected');
	}); */
};
</script>

</body>
</html>